<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>新增商品</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    {template 'web/common/tpl_header'}

    <link rel="stylesheet" href="../addons/xn_erp/images/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../addons/xn_erp/images/layuiadmin/style/admin.css" media="all">

</head>

<body>
    <style>
        *{-webkit-box-sizing: initial;-moz-box-sizing: initial; box-sizing: initial;}
        .layui-upload-img{width:92px;height:92px;margin:0 10px 10px 0;}
        .layui-input-required{color:#ff0000;font-weight:800;}
        .layui-anim-upbit .switch:before{
            background: none!important;
        }
        .layui-anim-upbit .switch:after{
            background: none!important;
            height: inherit;
            width: inherit;
            border: 0;
            position: inherit;
            top: -4px;
        }
        .layui-treeSelect .ztree li span.button.switch{
            top: -6px;
        }
    </style>
    <form class="layui-form" action="" lay-filter="component-form-group">
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header">基本信息</div>
                <div class="layui-card-body" style="padding: 15px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品状态</label>
                        <div class="layui-input-block">
                            <input type="checkbox" name="status" lay-skin="switch" value="1" lay-text="上架|下架" checked>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="layui-input-required">*</span>商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" lay-verify="required" placeholder="请输入商品名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">商品编码</label>
                        <div class="layui-input-block">
                            <input type="text" name="number" placeholder="请输入商品编码" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label"><span class="layui-input-required">*</span>商品分类</label>
                        <div class="layui-input-block">
                            <!-- <input type="text" name="category_id" lay-verify="required" placeholder="请输入" class="layui-input"> -->
                            <input type="text" name="category_id" id="category_tree" lay-filter="tree" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class=" layui-form-label">条形码</label>
                        <div class="layui-input-block">
                            <input type="tel" name="bar_code" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">商品排序</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="sort" lay-verify="number" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="layui-input-required">*</span>商品单位</label>
                            <div class="layui-input-inline">
                                <select name="unit_id" lay-verify="">
                                    <option value="">请选择单位</option>
                                    {loop $unit $key $val}
                                    <option value="{$val['id']}">{$val['name']}</option>
                                    {/loop}
                                </select>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header">价格设置</div>
                <div class="layui-card-body" style="padding: 15px;">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="layui-input-required">*</span>市场价</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="sale_price" lay-verify="required|number" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="layui-input-required">*</span>采购价</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="pur_price" lay-verify="required|number" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label"><span class="layui-input-required">*</span>参考成本价</label>
                            <div class="layui-input-inline">
                                <input type="tel" name="unit_cost" lay-verify="required|number" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header">图片设置</div>
                <div class="layui-card-body" style="padding: 15px;">
                    {php echo xn_tpl_form_field_multi_image('img');}
                </div>
            </div>
        </div>
        <div class="layui-fluid">
            <div class="layui-card">
                <div class="layui-card-header">其他设置</div>
                <div class="layui-card-body" style="padding: 15px;">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">备注</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入内容" class="layui-textarea" name="remark"></textarea>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                    <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>
    <script src="../addons/xn_erp/images/layuiadmin/layui/layui.js"></script>
    <script>
        //Demo
        layui.config({
            base: '../addons/xn_erp/images/layuiadmin/layui/extend/'
        }).use(['form', 'upload', 'treeSelect'], function () {
            var form = layui.form, upload = layui.upload, $ = layui.$, treeSelect = layui.treeSelect;

            treeSelect.render({
                // 选择器
                elem: '#category_tree',
                // 数据
                data: 'http://3.lhbbk.com/web/index.php?c=site&a=entry&do=set&m=xn_erp&op=category&type=goods&api=tree',
                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '请选择分类',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 点击回调
                click: function (d) {
                    console.log(d);
                },
                // 加载完成后的回调函数
                success: function (d) {
                    console.log(d);
                }
            });


            //监听提交
            form.on('submit(component-form-demo1)', function (data) {
                var url = "{$url}&op=add&api=add";
                // console.log(url)
                console.log(data.field);
                $.ajax({
                    // async: false,
                    type: "POST",
                    url: url,
                    // contentType: "application/x-www-form-urlencoded; charset=utf-8",
                    data: data.field,
                    // dataType: "josn",
                    success: function (result) {
                        layer.alert(result);
                    },
                    error: function (result) {
                        console.log(result);
                    }
                })
                // layer.open({type:1,content:JSON.stringify(data.field)});
                return false;
            });


        });


    </script>
</body>

</html>